<template>
    <div class="common_container">
        <!-- <div class="table_box"> -->
        <targetTable :loading="loading" :table-data="planList" :table-columns="qualtableLabel" :page="pageNum"
            :rows="pageSize" :total="totalNum" @handleChange="handleChange" />
        <!-- </div> -->
        <!-- 第一种div 小圆 -->
        <div1 height="500px" title="近10年辽宁省(全部/公用/自备) 电厂累计数量对比分析" titleColor="#27aaa4" desc="单位: 万千瓦时">
            <div style="height: 100px; width: 200px; background: red" slot="content"></div>
        </div1>
    </div>
</template>
<script>
import targetTable from "@/comon/components/targetTable.vue";
import div1 from "@/comon/components/div1.vue"
export default {
    components: { targetTable, div1 },
    data() {
        return {
            pageNum: 1,
            pageSize: 2,
            totalNum: 4,
            qualtableLabel: [ // 表头信息
                { label: '生效月', param: 'effectiveSalaryMonth' },
                { label: '扣款项目', param: 'itemName' },
                {
                    label: '数据来源', param: 'dataSource',
                    render: (h, scope) => { // 数据源[1-同步,2-导入,3-计算]
                        return (
                            <span>
                                {[['同步', '导入', '计算'][scope.row.dataSource - 1]]}
                            </span>
                        )
                    }
                },
                { label: '更新人', param: 'updateByUser' },
                { label: '创建人', param: 'createByUser' },
                { label: '更新时间', param: 'updateAt', width: 200 },
                {
                    label: '操作', width: 240,
                    render: (h, scope) => {
                        return (<span>
                            {<el-button type='primary' size='mini' plain icon='el-icon-emit' onClick={() => { this.editFn(scope.row, '') }}>配置</el-button>}
                            {<el-button type='danger' size='mini' plain icon='el-icon-emit' onClick={() => { this.deleteFn(scope.row, '') }}>删除</el-button>}
                        </span>)
                    }
                }
            ],
            planList: [
                {
                    effectiveSalaryMonth: "1月",
                    itemName: "项目1",
                    dataSource: "1",
                    updateByUser: "更新人",
                    createByUser: "创建人",
                    updateAt: "2022-05-09"
                },
                {
                    effectiveSalaryMonth: "1月",
                    itemName: "项目1",
                    dataSource: "1",
                    updateByUser: "更新人",
                    createByUser: "创建人",
                    updateAt: "2022-05-09"
                },
                {
                    effectiveSalaryMonth: "1月",
                    itemName: "项目1",
                    dataSource: "1",
                    updateByUser: "更新人",
                    createByUser: "创建人",
                    updateAt: "2022-05-09"
                },
                {
                    effectiveSalaryMonth: "1月",
                    itemName: "项目1",
                    dataSource: "1",
                    updateByUser: "更新人",
                    createByUser: "创建人",
                    updateAt: "2022-05-09"
                },
                {
                    effectiveSalaryMonth: "1月",
                    itemName: "项目1",
                    dataSource: "1",
                    updateByUser: "更新人",
                    createByUser: "创建人",
                    updateAt: "2022-05-09"
                },
                {
                    effectiveSalaryMonth: "1月",
                    itemName: "项目1",
                    dataSource: "1",
                    updateByUser: "更新人",
                    createByUser: "创建人",
                    updateAt: "2022-05-09"
                },
                {
                    effectiveSalaryMonth: "1月",
                    itemName: "项目1",
                    dataSource: "1",
                    updateByUser: "更新人",
                    createByUser: "创建人",
                    updateAt: "2022-05-09"
                },
                {
                    effectiveSalaryMonth: "1月",
                    itemName: "项目1",
                    dataSource: "1",
                    updateByUser: "更新人",
                    createByUser: "创建人",
                    updateAt: "2022-05-09"
                },
                {
                    effectiveSalaryMonth: "1月",
                    itemName: "项目1",
                    dataSource: "1",
                    updateByUser: "更新人",
                    createByUser: "创建人",
                    updateAt: "2022-05-09"
                },
                {
                    effectiveSalaryMonth: "1月",
                    itemName: "项目1",
                    dataSource: "1",
                    updateByUser: "更新人",
                    createByUser: "创建人",
                    updateAt: "2022-05-09"
                },
            ],

        }
    },
    methods: {
        editFn(row) {
            console.log("editFn: ", row);
        },
        deleteFn(row) {
            console.log("deleteFn: ", row);
        },
        handleChange(page) {
            console.log("page: ", page);
        }
    }
}
</script>
<style lang="scss">
.common_container {
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;

    .table_box {
        width: 100%;
        height: 500px;
    }
}
</style>